<template>
    <el-container>
        <el-aside>
            <el-tree :data="courseTypes" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
        </el-aside>
        <el-main>

        </el-main>
    </el-container>
</template>

<script>
    export default {
        name: "CourseType.vue",
        data(){
            return {
                courseTypes: [], //类型树的数据
                defaultProps: {
                    children: 'children', //children作为当前节点的子 节点数据
                    label: 'name' //label作为当前节点的名称
                }
            }
        },
        methods: {
            handleNodeClick(data) {
                console.log(data);
            },
            getCourseTypes(){
                this.$http.get("/course/courseType/typeTree").then(res=>{
                    this.courseTypes = res.data;
                })
            }
        },
        mounted(){
            this.getCourseTypes();
        }
    }
</script>

<style scoped>
    .el-container{
        height: 650px;
        margin-top: 10px;
    }
    .el-aside {
        border: 1px solid #ccc;
        width: 300px;
    }
    .el-main {
        border: 1px solid #ccc;
        border-left: none;
    }

    body > .el-container {
        height: 100%;
    }
</style>